<template>
    <div class="shopp_car">
        <div class="shopp_list">
<!--      操作栏      -->
            <div style="margin-top: 10px;">
                <el-input placeholder="请输入用户账号" @change="queryAccurate" v-model="input"  prefix-icon="el-icon-search" clearable></el-input>
            </div>
            <div class="operation_goods">
                <span class="delect-intent" style="color: #000c17;font-weight: bold;" v-if="moreDelectId.length" @click="batchDelet">删除 <i class="el-icon-delete"></i></span>
                <span class="delect-intent" style="cursor: no-drop;" v-else >删除 <i class="el-icon-delete"></i></span>
            </div>
            <!--    商品信息列表    -->
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    :row-class-name="tableRowClassName"
                    @selection-change="selectFun">
                <el-table-column
                        type="selection"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="account"
                        label="用户账号"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="goods_name"
                        label="商品名"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="buy_address"
                        label="商品名"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="goods_pice"
                        label="单价/元"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="buy_number"
                        label="订单量"
                        width="100"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="buy_time"
                        label="下单时间"
                        width="200"
                        align="center">
                    <template slot-scope="scope">
                        {{new Date(parseInt(scope.row.buy_time)).toLocaleString().replace(/:\d{1,2}$/,' ')}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="总价"
                        align="center">
                    <template slot-scope="scope">
                        {{parseInt(scope.row.goods_pice)*scope.row.buy_number | moneyFormat}}
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--    分页    -->
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 30]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {shoppCarApi,shoppCarDelectApi ,shoppAccurateApi} from "@/api/ljy_port/shoppCar";
    export default {
        name: "index",
        data() {
            return {
                tableData: [{
                    user_account: 15718604576,
                    goods_name: 'Zero名匠 Y 919 系列',
                    goods_pice:19100,
                    buy_number:2,
                    buy_time:'2020.10.28'
                }],
                moreDelectId:[],
                currentPage:1,
                input:'',
                total:0,
                size:10
            }
        },
        methods: {
            // ys
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            selectFun(selection){
                this.moreDelectId = selection;
                console.log(this.moreDelectId);
            },
            batchDelet(){
                this.check()
            },
            addGoods(){
                // this.$refs.add_admin.openDrawer();
            },
            //    分页方法
            handleSizeChange(val) {
                this.size = val;
                this.currentPage = 1;
                this.ljy();
            },
            handleCurrentChange(val) {
                    this.currentPage = val;
                    this.ljy();
            },
            // ys

            //shoppCar接口
            ljy() {
                shoppCarApi(this.currentPage, this.size).then(req => {
                    console.log(req)
                    this.tableData=req.data.content
                    this.total=req.data.totalElements
                })
            },
            queryAccurate(value){
                if (value){
                    shoppAccurateApi(value).then(res =>{
                        this.tableData=res.data
                        this.total=res.data.length
                    })
                }else {
                    this.ljy();
                }
            },
            check(){
                let arrayId= [];
                for (let i=0;i< this.moreDelectId.length;i++)
                {
                    arrayId.push(this.moreDelectId[i].id);
                }
                shoppCarDelectApi(arrayId).then(()=>{
                    this.ljy();
                    this.$message({type: 'success', message: '删除成功!'});
                })
            }
        },
        //shoppCar接口

        //  ys
        filters:{
            //取截单元,单位
            moneyFormat:function(arg){
                if(arg.toString().length>=13){
                    // return arg/1000000000000+"万亿"
                    const moneys = arg/1000000000000
                    const realVal = parseFloat(moneys).toFixed(2);
                    return realVal+"万亿元"

                }else if(arg.toString().length>=9){
                    const moneys = arg/100000000
                    const realVal = parseFloat(moneys).toFixed(2);
                    return realVal+"亿元"
                }else if(arg.toString().length>=4){
                    const moneys = arg/10000
                    const realVal = parseFloat(moneys).toFixed(2);
                    return realVal+"万元"
                }else {
                    return arg + '元'
                }

            }
        },
        // ys
        created() {
              this.ljy();
        },
    }
</script>

<style lang="scss" scoped>
.shopp_car{
    .shopp_list{
        height: 550px;
        overflow: auto;
    }
    .shopp_list::-webkit-scrollbar {
        width: 4px;
        scrollbar-arrow-color:red;
    }
    .block{
        text-align: center;
    }
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
    .operation_goods{
        height: 50px;
        width: 100%;
        .delect-intent{
            font-size: 16px;
            color: #c0c4cc;
            letter-spacing: 0.56px;
            line-height: 60px;
            margin-left: 40px;
            cursor: pointer;
        }
    }
}
</style>
